<template>
  <view class="container">
    <view class="header">
      <view class="name">
        {{ detail.goods.name }}
      </view>
      <view class="title">
        {{ detail.goods.introduce }}
      </view>
      <view class="thirdLine">
        <view class="tips">
          {{ tips }}
        </view>
        <view class="tips" style="text-align: end;">
          已售 {{ detail.goods.sales }}
        </view>
      </view>
      <view>
        <image
          :src="detail.goods.image"
          mode="scaleToFill"
        />
      </view>
    </view>  
    <view class="tabs">
      <view class="title">
        详情
        <image
          class="line"
          src="../../../static/business/line.png"
          mode="scaleToFill"
        />
      </view>
      <view class="title">
        推荐
        <image
          class="line"
          src="../../../static/business/line.png"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="detail">
      <view class="text">包含项目</view>
      <view class="text">价值<span class="price">￥68元</span>  洗剪吹1次</view>
      <view class="text">价值<span class="price">￥88元</span>  资深设计师造型1次</view>
      <view class="text">洗剪吹流程：清洁洗发(10-15分钟)→剪发30分钟→剪发30分钟→剪发30分钟</view>
      <view class="img">
        <image
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          mode="scaleToFill"
        />
        <image
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          mode="scaleToFill"
        />
      </view>
      <view class="mastKnow">
        <view class="item">
          <span class="tag">*</span> 如有用户发质不适合以上部分项目，为了您的发质考虑，请听从 发型师建议；
        </view>
        <view class="item">
          <span class="tag">*</span> 如有用户发质不适合以上部分项目，为了您的发质考虑，请听从 发型师建议；
        </view>
      </view>
    </view>
    <view class="smallTitle">适用商家</view>
    <view class="shop">
      <view class="name">TOP HAIR烫染接发(浦西万达店)</view>
      <view class="workTime">营业时间: 周一至周日 10:00-22:00</view>
      <view class="hr"></view>
      <view class="contact">
        <view class="address">
          <view>
            <image
              class="addressImg"
              src="../../../static/business/address.png"
              mode="scaleToFill"
            />
            地址：宝洲街浦西万达金街东段266-267店铺
          </view>
          <image
            class="img"
            src="../../../static/business/navigation.png"
            mode="scaleToFill"
          />
        </view>
        <view>
          <image
              class="telephoneImg"
              src="../../../static/business/telephone.png"
              mode="scaleToFill"
            />
          电话：400-888-8888
        </view>
      </view>
    </view>
    <view class="smallTitle">热门推荐</view>
    <view class="hotShop" v-for="item in 3" :key="item">
      <view class="left">
        <view>
          <image
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            mode="scaleToFill"
          />
        </view>
        <view>
          <view class="name">优质体验 舒适洗吹+造型</view>
          <view class="title">头部按摩丨护发洗发丨设计造型</view>
          <view class="price"><span>￥196.99 </span> <span class="count"> ￥249.99</span></view>
        </view>
      </view>
      <view class="right">
        <image
          src="../../../static/business/shopBtn.png"
          mode="scaleToFill"
        />
        <view class="sale">已售326</view>
      </view>
    </view>
  </view>
  <view class="footer">
    <view class="left">
      <view class="item">
        <image
          @click="collectGoods(false)"
          v-if="!collections"
          class="collect"
          src="../../../static/business/collectoff.png"
          mode="scaleToFill"
        />
        <image
          @click="collectGoods(true)"
          v-else
          class="collect"
          src="../../../static/business/collecton.png"
          mode="scaleToFill"
        />
        <span>收藏</span>
      </view>
      <view class="line"></view>
      <view class="item">
        <image
          src="../../../static/business/share.png"
          mode="scaleToFill"
        />
        <span>分享</span>
      </view>
    </view>
    <view class="right">
      <button @click="submit" v-if="detail.goods.type === 1">¥{{ detail.goods.price }}抢购</button>
      <button @click="submit" v-else>在线预约</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { goodsDetail, collection } from '@/service/index.ts'


const name = ref('TOP HAIR烫染接发(浦西万达店)')
const title = ref('设计师洗剪吹·资深设计师造型1次')
const tips = ref('随时退 丨 可预约')
const haveSale = ref('已售 178')


// 商品id
const goodsId = ref()
// 收藏商品
const collections = ref(false)

// 商品详情
const detail = ref()

onLoad((options) => {
  console.log(1,options.id);
  goodsId.value = options.id + ''
  goodsDetail({id: options.id + ''}).then(res => {
    detail.value = res
    console.log(detail.value);
  })
})

// 收藏商品
const collectGoods = (type) => {
  console.log(goodsId.value);
  console.log(type);
  collection({goodsId: goodsId.value}).then(res => {
    collections.value = !type
  })
}

// 预约或抢购
const submit = () => {
  wx.navigateTo({
    url: '/pages/business/submit/index?id=' + goodsId.value + '&type=' + detail.value.goods.type
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: $body-bc;
  color: $content-color;
  box-sizing: border-box;
  padding: 14rpx 28rpx 126rpx;
  .header {
    background: #112959;
    border-radius: 20rpx;
    margin-bottom:31rpx;
    padding: 19rpx 25rpx 30rpx;
    box-sizing: border-box;
    .name {
      width: 309rpx;
      font-weight: 400;
      font-size: 22rpx;
      color: #3A75C0;
      line-height: 48rpx;
      margin-bottom: 8rpx;
      white-space: nowrap;
    }
    .title {
      width: 515rpx;
      font-weight: bold;
      font-size: 34rpx;
      color: #00C1FF;
      line-height: 48rpx;
      margin-bottom: 12rpx;
    }
    .tips {
      flex: 1;
      font-weight: 400;
      font-size: 22rpx;
      color: #3A75C0;
      line-height: 48rpx;
      white-space: nowrap;
    }
    .thirdLine {
      display: flex;
      justify-content: space-between;
      margin-bottom: 18rpx;
      height: 48rpx;
    }
    image {
      width: 100%;
      height: 356rpx;
      background: #FF785B;
      border-radius: 20rpx;
    }
  }
  .tabs {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 25rpx;
    .title {
      // height: 29rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 30rpx;
      color: #3A75C0;
      line-height: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: #00C1FF;
    }
    .line {
      width: 37rpx;
      height: 12rpx;
      margin-top: 10rpx;
    }
    .active::after {
      content: '';
      display: block;
      // width: 37rpx;
      height: 12rpx;
      background: #FF4F00;
    }
  }
  .detail {
    background: #112959;
    border-radius: 20rpx;
    padding: 41rpx 26rpx 38rpx;
    .text {
      font-weight: 400;
      font-size: 26rpx;
      color: #3A75C0;
      line-height: 48rpx;
    }
    .price {
      color: #00C1FF;
      font-weight: 700;
    }
    .img {
      margin: 31rpx 0 45rpx;
    }
    .mastKnow {
      font-weight: 400;
      font-size: 22rpx;
      color: #3A75C0;
      line-height: 32rpx;
      .item {
        margin-bottom: 34rpx;
      }
      .item:last-child {
        margin-bottom: 0;
      }
      .tag {
        color: #FF4F00;
      }
    }
  }
  .smallTitle {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 30rpx;
    color: #00C1FF;
    line-height: 35rpx;
    margin: 34rpx 0;
  }
  .shop {
    background: #112959;
    border-radius: 20rpx;
    padding: 30rpx 26rpx 33rpx;
    .name {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 32rpx;
      color: #00C1FF;
      line-height: 48rpx;
    }
    .workTime {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 22rpx;
      color: #3A75C0;
      line-height: 48rpx;
    }
    .hr {
      height: 1rpx;
      background: #1D4374;
      margin: 15rpx 0;
    }
    .img {
      width: 46rpx;
      height: 46rpx;
      background-color: #112959;
    }
    .address {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .addressImg {
      width: 16rpx;
      height: 18rpx;
      margin-right: 10rpx;
    }
    .telephoneImg {
      width: 19rpx;
      height: 21rpx;
      margin-right: 10rpx;
    }
    .contact {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 24rpx;
      color: #3A75C0;
      line-height: 45rpx;
    }
  }
  .hotShop {
    background: #112959;
    border-radius: 20rpx;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }
      .name {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 24rpx;
        color: #00C1FF;
        line-height: 48rpx;
      }
      .title {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20rpx;
        color: #3A75C0;
        line-height: 34rpx;
      }
      .price {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 26rpx;
        color: #FF4F00;
        line-height: 48rpx;
      }
      .count {
        color: #3A75C0;
        font-size: 22rpx;
        text-decoration-line: line-through;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image {
        width: 118rpx;
        height: 52rpx;
      }
      .sale {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20rpx;
        color: #3A75C0;
        line-height: 48rpx;
      }
    }
  }
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #112959;
  padding: 12rpx 24rpx;
  z-index: 999;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18rpx;
  color: #00C1FF;
  line-height: 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    image {
      width: 34rpx;
      height: 34rpx;
    }
    .line {
      width: 1rpx;
      height: 35rpx;
      background: #1D4374;
    }
  }
  .right {
    button {
      width: 468rpx;
      background: #00C1FF;
      border-radius: 38rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 34rpx;
      color: #112959;
      line-height: 76rpx;
    }
  }
}
.collect {
  width: 35rpx;
  height: 33rpx;
}
</style>
